<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局属性说明</title>
    <link rel="stylesheet" href="/static/css/myDocPage.css">
    <style>

        h1, h2 {
            display: table-row;
        }

        body > div {
            display: table;
        }

        .flex-container {
            display: flex;
            width: 500px;
            height: 300px;
            border: 1px solid black;
            float: left;
            margin: 10px;
        }

        .flex-container > .flex-item {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            margin: 10px;
        }

        /*
        说明:
            1. flex-direction属性用来定义伸缩方向, 也就是元素的排序方向:
                - row: 从左到右;
                - column: 从上到下;
        */
        .add-direction {
            flex-direction: column;
        }

        /*
        说明:
            1. flex-wrap属性定义其中的元素是否换行显示;
                - wrap: 其中的元素不会换行, 如果容器显示不下, 就会自动改变其中元素的宽度;
                    1. 注意的是: 这个属性变相的使overflow属性的横向失效了, 因为横向不会溢出了, 但是竖向还是有效的.
                - nowrap: 其中的元素会换行
        */
        .add-wrap {
            flex-wrap: wrap;
            overflow: hidden;
        }

        /*
        说明:
            1. justify-content属性是控制元素主轴排列:
                - flex-start: 按照主轴开始进行对齐;
                - flex-end: 按照主轴结束进行对齐;
                - center: 居中对齐;
                - space-between: 分散两端对齐;
                - space-around: 平均分配到父容器中, 并在左右两侧留有一定空间.
            2. 主轴: 就是从上到下;
            3. 侧轴: 就是从左到右;
        */
        .add-justify-content-1 {
            justify-content: flex-start;
        }
        .add-justify-content-2 {
            justify-content: flex-end;
        }
        .add-justify-content-3 {
            justify-content: center;
        }
        .add-justify-content-4 {
            justify-content: space-between;
        }
        .add-justify-content-5 {
            justify-content: space-around;
        }

        .add-align-items-1 {
            align-items: flex-start;
        }
        .add-align-items-2 {
            align-items: flex-end;
        }
        .add-align-items-3 {
            align-items: center;
        }
        .add-align-items-4 {
            align-items: baseline;
        }
        .add-align-items-5 {
            align-items: stretch;
        }

        /*
        说明:
            1. align-content属性用来控制flex容器中的元素换行时的表现:
                - flex-start: 各行都向容器主轴开始堆叠;
                - flex-end: 各行都向容器主轴结束堆叠;
                - center: 各行都向容器中间位置堆叠;
                - space-between: 各行平均分布, 但是在主轴开始结束两侧不留空间;
                - space-around: 各行平均分布, 但是在主轴开始结束两侧留平均长度一半的空间;
                - stretch: 各行将会以伸缩占用剩余空间;
        */
        .add-align-content-1 {
            align-content: flex-start;
            flex-wrap: wrap;
        }
        .add-align-content-2 {
            align-content: flex-end;
            flex-wrap: wrap;
        }
        .add-align-content-3 {
            align-content: center;
            flex-wrap: wrap;
        }
        .add-align-content-4 {
            align-content: space-between;
            flex-wrap: wrap;
        }
        .add-align-content-5 {
            align-content: space-around;
            flex-wrap: wrap;
        }
        .add-align-content-6 {
            align-content: stretch;
            flex-wrap: wrap;
        }

        /*
        说明:
            1. flex布局下, 元素不再像传统文档流那样使用根据树结构排列了, 可以设置不同的order将后面的元素放到前面, 前面的元素放到
            后面, order从1开始在最前面, 依次向后.
        */
        .add-order > div:nth-of-type(1) {
            order: 4;
        }
        .add-order > div:nth-of-type(2) {
            order: 1;
        }
        .add-order > div:nth-of-type(3) {
            order: 2;
        }
        .add-order > div:nth-of-type(4) {
            order: 3;
        }

        /*
        说明:
            1. flex属性是flex-grow, flex-shrink, flex-basis三个属性的合并简写形式, 指令格式: `flex: flex-grow flex-shrink flex-basis`
            默认值: 0 1 auto;
                - flex-grow: 这个属性用于设置或检索弹性盒模型对象的子元素如何分配空间:
                    1. 0: 设置该属性为它的默认值;
                    2. 1: 使其中的元素平均分配宽度.
                - flex-shrink: 用来定义元素收缩的能力.
         */
        .add-flex {
            flex: 1;
        }

    </style>
</head>
<body>
<div>
    <h1>1. 简单属性的作用</h1>
    <h2>1.1 display: flex;属性的作用</h2>
    <div>
        <div class="flex-container" style="height: 100px;">
            <div class="flex-item">第1个</div>
            <div class="flex-item">第2个</div>
            <div class="flex-item">第3个</div>
            <div class="flex-item">第4个</div>
        </div>
    </div>

</div>
<div>
    <h1>2. 定义元素的排列方向</h1>
    <h2>2.1 flex-direction属性使默认的row主轴排序变为侧轴排序</h2>
    <div class="flex-container add-direction">
        <div class="flex-item">第1个</div>
        <div class="flex-item">第2个</div>
        <div class="flex-item">第3个</div>
        <div class="flex-item">第4个</div>
    </div>
    <h2>2.2 flex-wrap属性给元素添加上flex换行</h2>
    <div class="flex-container add-wrap">
        <div class="flex-item">第1个</div>
        <div class="flex-item">第2个</div>
        <div class="flex-item">第3个</div>
        <div class="flex-item">第4个</div>
    </div>
</div>
<div>
    <h1>3. 控制flex元素对齐方式(较有用)</h1>
    <h2>3.1 justify-content属性控制主轴对齐</h2>
    <div class="flex-container add-justify-content-1">
        <div class="flex-item" style="width: 50px; height: 50px;">第1个</div>
        <div class="flex-item" style="width: 60px; height: 60px;">第2个</div>
        <div class="flex-item" style="width: 70px; height: 70px;">第3个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">第4个</div>
    </div>
    <div class="flex-container add-justify-content-2">
        <div class="flex-item" style="width: 50px; height: 50px;">第1个</div>
        <div class="flex-item" style="width: 60px; height: 60px;">第2个</div>
        <div class="flex-item" style="width: 70px; height: 70px;">第3个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">第4个</div>
    </div>
    <div class="flex-container add-justify-content-3">
        <div class="flex-item" style="width: 50px; height: 50px;">第1个</div>
        <div class="flex-item" style="width: 60px; height: 60px;">第2个</div>
        <div class="flex-item" style="width: 70px; height: 70px;">第3个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">第4个</div>
    </div>
    <div class="flex-container add-justify-content-4">
        <div class="flex-item" style="width: 50px; height: 50px;">第1个</div>
        <div class="flex-item" style="width: 60px; height: 60px;">第2个</div>
        <div class="flex-item" style="width: 70px; height: 70px;">第3个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">第4个</div>
    </div>
    <div class="flex-container add-justify-content-5">
        <div class="flex-item" style="width: 50px; height: 50px;">第1个</div>
        <div class="flex-item" style="width: 60px; height: 60px;">第2个</div>
        <div class="flex-item" style="width: 70px; height: 70px;">第3个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">第4个</div>
    </div>
    <h2>3.2 align-items属性控制侧轴对齐</h2>
    <div class="flex-container add-align-items-1">
        <div class="flex-item" style="width: 50px; height: 50px;">侧轴对齐侧第1个</div>
        <div class="flex-item" style="width: 60px; height: 60px;">侧轴对齐侧第2个</div>
        <div class="flex-item" style="width: 70px; height: 70px;">侧轴对齐侧第3个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">侧轴对齐侧第4个</div>
    </div>
    <div class="flex-container add-align-items-2">
        <div class="flex-item" style="width: 50px; height: 50px;">侧轴对齐第1个</div>
        <div class="flex-item" style="width: 60px; height: 60px;">侧轴对齐第2个</div>
        <div class="flex-item" style="width: 70px; height: 70px;">侧轴对齐第3个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">侧轴对齐第4个</div>
    </div>
    <div class="flex-container add-align-items-3">
        <div class="flex-item" style="width: 50px; height: 50px;">侧轴对齐第1个</div>
        <div class="flex-item" style="width: 60px; height: 60px;">侧轴对齐第2个</div>
        <div class="flex-item" style="width: 70px; height: 70px;">侧轴对齐第3个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">侧轴对齐第4个</div>
    </div>
    <div class="flex-container add-align-items-4">
        <div class="flex-item" style="width: 50px; height: 50px;">侧轴对齐第1个</div>
        <div class="flex-item" style="width: 60px; height: 60px;">侧轴对齐第2个</div>
        <div class="flex-item" style="width: 70px; height: 70px;">侧轴对齐第3个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">侧轴对齐第4个</div>
    </div>
    <div class="flex-container add-align-items-5">
        <div class="flex-item" style="width: 50px; height: 50px;">侧轴对齐第1个</div>
        <div class="flex-item" style="width: 60px; height: 60px;">侧轴对齐第2个</div>
        <div class="flex-item" style="width: 70px; height: 70px;">侧轴对齐第3个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">侧轴对齐第4个</div>
    </div>
    <h2>3.3 align-content属性控制flex元素中的元素的对齐</h2>
    <div class="flex-container add-align-content-1">
        <div class="flex-item" style="width: 50px; height: 50px;">伸缩行齐侧第1个</div>
        <div class="flex-item" style="width: 60px; height: 60px;">伸缩行齐侧第2个</div>
        <div class="flex-item" style="width: 70px; height: 70px;">伸缩行齐侧第3个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第4个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第5个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第6个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第7个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第8个</div>
    </div>
    <div class="flex-container add-align-content-2">
        <div class="flex-item" style="width: 50px; height: 50px;">伸缩行齐第1个</div>
        <div class="flex-item" style="width: 60px; height: 60px;">伸缩行齐第2个</div>
        <div class="flex-item" style="width: 70px; height: 70px;">伸缩行齐第3个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐第4个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第5个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第6个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第7个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第8个</div>
    </div>
    <div class="flex-container add-align-content-3">
        <div class="flex-item" style="width: 50px; height: 50px;">伸缩行齐第1个</div>
        <div class="flex-item" style="width: 60px; height: 60px;">伸缩行齐第2个</div>
        <div class="flex-item" style="width: 70px; height: 70px;">伸缩行齐第3个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐第4个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第5个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第6个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第7个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第8个</div>
    </div>
    <div class="flex-container add-align-content-4">
        <div class="flex-item" style="width: 50px; height: 50px;">伸缩行齐第1个</div>
        <div class="flex-item" style="width: 60px; height: 60px;">伸缩行齐第2个</div>
        <div class="flex-item" style="width: 70px; height: 70px;">伸缩行齐第3个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐第4个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第5个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第6个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第7个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第8个</div>
    </div>
    <div class="flex-container add-align-content-5">
        <div class="flex-item" style="width: 50px; height: 50px;">伸缩行齐第1个</div>
        <div class="flex-item" style="width: 60px; height: 60px;">伸缩行齐第2个</div>
        <div class="flex-item" style="width: 70px; height: 70px;">伸缩行齐第3个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐第4个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第5个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第6个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第7个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第8个</div>
    </div>
    <div class="flex-container add-align-content-6">
        <div class="flex-item" style="width: 50px; height: 50px;">伸缩行齐第1个</div>
        <div class="flex-item" style="width: 60px; height: 60px;">伸缩行齐第2个</div>
        <div class="flex-item" style="width: 70px; height: 70px;">伸缩行齐第3个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐第4个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第5个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第6个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第7个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">伸缩行齐侧第8个</div>
    </div>
</div>
<div>
    <h1>4. flex元素高级控制</h1>
    <h2>4.1 使用order属性控制元素的顺序</h2>
    <div class="flex-container add-order">
        <div class="flex-item" style="width: 50px; height: 50px;">侧轴对齐侧第1个</div>
        <div class="flex-item" style="width: 60px; height: 60px;">侧轴对齐侧第2个</div>
        <div class="flex-item" style="width: 70px; height: 70px;">侧轴对齐侧第3个</div>
        <div class="flex-item" style="width: 80px; height: 80px;">侧轴对齐侧第4个</div>
    </div>
    <h2>4.2 使用flex属性控制flex元素的宽度</h2>
    <div class="flex-container add-flex">
        <div class="flex-item" style="flex: 1;">侧轴对齐侧第1个</div>
        <div class="flex-item" style="flex: 2;">侧轴对齐侧第2个</div>
        <div class="flex-item" style="flex: 3;">侧轴对齐侧第3个</div>
        <div class="flex-item" style="flex: 3;">侧轴对齐侧第4个</div>
        <div class="flex-item" style="flex: 3;">侧轴对齐侧第5个</div>
        <div class="flex-item" style="flex: 1;">侧轴对齐侧第6个</div>
    </div>
</div>
</body>
</html>